<template>
  <div>
    <el-container>
      <el-header class="header" style="padding: 0;">
        <el-form :inline="true">
          <el-form-item label="" prop="keyword">
            <el-date-picker
              v-model="value4"
              type="datetimerange"
              :picker-options="pickerOptions2"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="search" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
    </el-container>
    <el-container>
      <div id="main" :style="{width: '100%', height: '300px'}"></div>
    </el-container>
    <el-container>
      <div class="line"></div>
    </el-container>
    <el-container>
      <div id="main1" :style="{width: '100%', height: '350px'}"></div>
    </el-container>
  </div>
</template>

<script>
  /* eslint-disable no-mixed-operators */

  import echart from 'echarts';
  import service from '../../../service/count';

  export default {
    name: 'propellingMovementNum',
    data() {
      return {
        lineTime: [],
        lineNum: [],
        pieValur: [],
        pieName: [],
        pieShow: {},
        value4: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          }],
        },
      };
    },
    mounted() {
      this.lineInit();
      this.pieInit();
    },
    components: {
    },
    methods: {
      search() {
        const fromtime = this.value4 ? new Date(this.value4[0]).getTime() : '';
        const totime = this.value4 ? new Date(this.value4[1]).getTime() : '';
        const dataObj = { fromTime: fromtime, toTime: totime };
        this.lineInit(dataObj);
        this.pieInit(dataObj);
      },
      lineInit(data) {
        const that = this;
        that.lineTime = [];
        that.lineNum = [];
        const myChart = echart.init(document.getElementById('main'), 'light');
        service.getCountLine(data).then((res) => {
          res.map((item) => {
            that.lineTime.push(item.push_date);
            that.lineNum.push(item.push_num);
            return true;
          });
          myChart.setOption({
            title: {
              text: '推送人数',
              x: 'left',
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: that.lineTime,
              name: '时间',
            },
            yAxis: {
              type: 'value',
              name: '总人数',
            },
            series: [{
              name: '人数',
              type: 'line',
              data: that.lineNum,
            }],
          });
        });
      },
      pieInit(data) {
        const that = this;
        that.pieValur = [];
        that.pieName = [];
        that.pieShow = {};
        const myChart1 = echart.init(document.getElementById('main1'), 'light');
        service.getCountPie(data)
          .then((res) => {
            that.pieValur = res;
            res.map((item, index) => {
              if (index < 5) {
                that.pieShow[item.public_address] = true;
              } else {
                that.pieShow[item.public_address] = false;
              }
              that.pieValur.push({
                name: item.public_address,
                value: item.push_num,
              });
              that.pieName.push(item.public_address);
              return true;
            });
            myChart1.setOption({
              title: {
                text: '公众号推送人数比例',
                // subtext: '纯属虚构',
                x: 'left',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
              },
              legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: that.pieName,
                selected: that.pieShow,
              },
              series: [
                {
                  name: '公众号',
                  type: 'pie',
                  radius: '55%',
                  center: ['40%', '50%'],
                  data: that.pieValur,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                  },
                },
              ],
            });
          });
      },
    },
  };
</script>

<style scoped>
  .line{
    height: 1px;
    width: 100%;
    margin: 30px auto;
    background: #ccc;
  }
</style>
